@border-color : #ddd;
@background: #fff;
.w-wave {
  position: relative;
  margin: auto;
  * {
    box-sizing: border-box;
  }
  .w-sub-ball {
    width: 100%;
    height: 100%;
    .w-sub-ball-item {
      background: @background;
      border-radius: 50%;
      cursor: pointer;
      .w-sub-ball-item-wave {
        position: relative;
        overflow: hidden;
        border: 1px @border-color solid;
        border-radius: 50%;
        z-index: 1;
        opacity: .8;
        .w-water-wave {
          margin-left: -10px;
        }
      }
      .w-sub-ball-item-img {
        width: 80%;
        height: 80%;
        left: 10%;
        top: 10%;
        z-index: 0;
      }
      .w-sub-ball-item-text {
        line-height: 18px;
        height: 40px;
        text-align: center;
        left: -20px;
        right: -20px;
        bottom: -40px;
        font-size:14px;
        z-index: 1;
      }
    }
  }
  .w-core-ball {
    border-radius: 50%;
    background: @background;
    z-index: 1;
    border: 1px @border-color solid;
  }
  .position-absolute {
    position: absolute;
    display: block;
  }
  .w-wave-popup {
    z-index: 2;
    background: @background;
    padding: 10px;
    border-radius: 5px;
    display: inline-block;
    border: 1px @border-color solid;
    position: absolute;
    .w-wave-custom-popup {
      width: 200px;
      font-size: 14px;
      h3 {
        margin: 0;
        font-size: 16px;
      }
      ul,li {
        list-style-type: none;
        margin: 0;
        padding: 0;
      }
      ul {
        display: flex;
        flex-wrap: wrap;
      }
      li {
        a {
          display: block;
          margin: 10px 10px 0 0;
          padding: 5px 15px;
          cursor: pointer;
          border: 1px @border-color solid;
        }
      }
    }
    &:before {
      display: block;
      content: '';
      width: 0;
      height: 0;
      left: -8px;
      top: 4px;
      position: absolute;
      background: none;
      border-width: 8px 8px 8px 0;
      border-style: solid;
      border-color: transparent @border-color transparent transparent;
    }
    .w-wave-popup-pointer {
      width: 0;
      height: 0;
      top: 5px;
      position: absolute;
      background: none;
      border-style: solid;
    }
    &.w-wave-popup-left {
      &:before {
        right: -8px;
        left: auto;
        border-width: 8px 0 8px 8px;
        border-color: transparent transparent transparent @border-color;
      }
      .w-wave-popup-pointer {
        right: -7px;
        left: auto;
        border-width: 7px 0 7px 7px;
        border-color: transparent transparent transparent @background;
      }
    }
    &.w-wave-popup-right {
      &:before {
        left: -8px;
        right: auto;
        border-width: 8px 8px 8px 0;
        border-color: transparent @border-color transparent transparent;
      }
      .w-wave-popup-pointer {
        left: -7px;
        right: auto;
        border-width: 7px 7px 7px 0;
        border-color: transparent @background transparent transparent;
      }
    }
    &.w-wave-popup-bottom {
      &:before {
        top: auto;
        bottom: 5px;
      }
      .w-wave-popup-pointer {
        top: auto;
        bottom: 5px;
      }
    }
  }
}